<template>
  <div class="p-2">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>{{ form.workName }}签约详细信息</span>
        </div>
      </template>
      <div class="row">
        <div class="col">
          <div class="label">
            用工姓名：
          </div>
          <div class="value"> {{ form.workName||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            手机号：
          </div>
          <div class="value"> {{ form.vPhone||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            身份证号：
          </div>
          <div class="value"> {{ form.cardId||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            企业名称：
          </div>
          <div class="value"> {{ form.busMerName||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            签约主体：
          </div>
          <div class="value"> {{ form.serviceName||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            签约业务类型：
          </div>
          <div class="value">
            <dict-tag
              :options="wxfe_bus_type"
              :value="form.busType"
            />
          </div>
        </div>
        <div class="col">
          <div class="label">
            合同编号：
          </div>
          <div class="value"> {{ form.no||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            签约文档地址：
          </div>
          <div class="value">
            <a
              v-if="form.signFileUrl"
              @click="downFile(form.signFileUrl)"

            >下载签约文档</a>
          </div>
        </div>
        <div class="col">
          <div class="label">
            签约文档在线地址：
          </div>
          <div class="value">
            <a
              v-if="form.signFileUrl"
              :href="form.signFileUrl"
              target="blank"
            >查看签约文档</a>
          </div>
        </div>
        <div class="col">
          <div class="label">
            签约状态：
          </div>
          <div class="value">
            <dict-tag
              :options="sign_status"
              :value="form.signStatus"
            />
          </div>
        </div>
      </div>
      <div class="card-footer">
        <el-button @click="returnOn()">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup name="contractDetail" lang="ts">
import api from '@/api/workMag/contractInquiry';
import { addOrEditForm } from '@/api/workMag/contractInquiry/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wxfe_bus_type, sign_status } = toRefs<any>(proxy?.useDict('sign_status', 'wxfe_bus_type'));

const form = ref<addOrEditForm>({
  workName: '',
  vPhone: '',
  cardId: '',
  busMerName: '',
  serviceName: '',
  busType: '',
  no: '',
  signFileUrl: '',
  signStatus: ''
});

const route = useRoute();
/** 查询签约信息 */
const getInfoData = async () => {
  const res = await api.contractInquiryDetail(contractId.value);
  form.value = res.data;
};

const downFile = (file:any)=>{
    if(!file){
       proxy?.$modal.msgError("暂无签约文件");
       return
    }
    file = file.replace("https","http");
    proxy?.download("/resource/oss/dlurl", {
      url:file,
    }, form.value.workName+`_签约文件_${new Date().getTime()}.pdf`);
}

// 返回
const returnOn = () => {
  proxy?.$router.go(-1);
  proxy?.$tab.closePage(route);
};

const contractId = ref<any>('');
onMounted(() => {
  if (route.query.id) {
    contractId.value = route.query.id;
    getInfoData(); // 查询签约信息
  }
});
</script>

<style lang="scss" scoped>
.card-footer {
  text-align: center;
}
</style>
